<template>

  <div>
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息">
          <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
            <el-form-item label="订单编号">
              <el-input v-model="orderId" disabled></el-input>
            </el-form-item>
            <el-form-item label="客户订单编号">
              <el-input v-model="basicInfo.customerOrderId" disabled></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
            <el-form-item label="客户名称">
              <el-input v-model="basicInfo.customerName" disabled></el-input>
            </el-form-item>
            <el-form-item label="客户合同">
              <el-select v-model="basicInfo.customerContract" placeholder="选择合同">
                <el-option
                  v-for="(item,index) in customerContracts"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="basicInfo" class="demo-form-inline,demo-ruleForm">
            <el-form-item label="订单来源">
              <el-select v-model="basicInfo.ordersources" placeholder="选择订单来源" :rules="[{ required: true, message: '科目不能为空'},]">
                <el-option
                  v-for="(item,index) in ordersourceses"
                  :key="index"
                  :label="item"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单类型">
              <el-select v-model="basicInfo.orderType" placeholder="选择订单类型">
                <el-option
                  v-for="(item,index) in orderTypes"
                  :key="index"
                  :label="item"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="basicInfo" class="demo-form-inline,demo-ruleForm">
            <el-form-item label="运输方式">
              <el-select v-model="basicInfo.transType" placeholder="选择运输方式" :rules="[{ required: true, message: '科目不能为空'},]">
                <el-option
                  v-for="(item,index) in transTypes"
                  :key="index"
                  :label="item"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="checked">是否急单</el-checkbox>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
            <el-form-item label="接单日期">
              <el-input v-model="basicInfo.receiptDate"></el-input>
            </el-form-item>
            <el-form-item label="操作人">
              <el-input v-model="basicInfo.operator"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
            <el-form-item label="回单号">
              <el-input v-model="basicInfo.tRId" disabled></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
            <el-form-item label="订单备注">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="basicInfo.remarks">
              </el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
            <el-form-item>
              <el-button type="danger" @click="onSubmit">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="地址信息">

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
            <el-form-item>
              <div>
                <span style="font-size: large">提货点信息</span>
              </div>
            </el-form-item>
            <el-divider></el-divider>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
            <el-form-item label="发货单位">
              <el-input v-model="addrinfos.forwardingUnit"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="addrinfos.shipmentContact"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="addrinfos.shipmentTelephone"></el-input>
            </el-form-item>
            <el-form-item label="手机">
              <el-input v-model="addrinfos.shipmentMobilephone"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
            <el-form-item label="发货地址">
              <div class="wrap">
                <v-distpicker @selected="onSelected"></v-distpicker>
                <div>
                  你当前选的的地址:{{fullAddress}}
                </div>
              </div>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
            <el-form-item label="详细地址">
              <el-input v-model="addrinfos.shippingDetailAddress"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline">
            <el-form-item label="取货时间说明">
              <el-input v-model="addrinfos.pickupTime"></el-input>
            </el-form-item>
            <el-form-item label="要求提货日期">
              <el-input v-model="addrinfos.requiredPickupTime"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
            <el-form-item>
              <div>
                <span style="font-size: large">收货地信息</span>
              </div>
            </el-form-item>
            <el-divider></el-divider>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
            <el-form-item label="收货单位">
              <el-input v-model="addrinfos.receivingUnit"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="addrinfos.harvestContact"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="addrinfos.receivingTelephone"></el-input>
            </el-form-item>
            <el-form-item label="手机">
              <el-input v-model="addrinfos.receivingMobilephone"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
            <el-form-item label="到货地址">
              <v-distpicker class="picker"  @selected='onSelected2'></v-distpicker>
              你当前选的的地址:{{area}}
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
            <el-form-item label="详细地址">
              <el-input v-model="addrinfos.receivingDetailAddress"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline">
            <el-form-item label="到货时间说明">
              <el-input v-model="addrinfos.receivingTime"></el-input>
            </el-form-item>
            <el-form-item label="要求到货日期">
              <el-input v-model="addrinfos.requestedReceiptTime"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline">
            <el-form-item label="回单类型">
              <el-select v-model="addrinfos.receiptType" placeholder="选择回单">
                <el-option
                  v-for="(item,index) in receiptTypes"
                  :key="index"
                  :label="item"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline">
            <el-form-item>
              <el-button type="danger" @click="AddrOnSubmit">保存</el-button>
            </el-form-item>
          </el-form>


        </el-tab-pane>
        <el-tab-pane label="货物信息">

          <div class="tableDate">
            <div class="button" style="width:6%;float:right;">
              <P><el-button class="el-icon-plus" @click.prevent="addRow()"></el-button></P>
              <p><el-button class="el-icon-minus" @click.prevent="delData()"></el-button></p>
            </div>
            <div class="table">
              <el-table
                :data="tableData"
                ref="table"
                tooltip-effect="dark"
                border
                stripe
                style="width: 93%"
                @selection-change='selectRow'>

                <el-table-column type="selection" width="45" align="center"></el-table-column>
                <el-table-column label="序号"  type="index" width="60" align="center"></el-table-column>
                <el-table-column  label="货物名称" align="center">
                  <template slot-scope="scope">
                    <el-input class="require_des" v-model="scope.row.goodsName"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="数量">
                  <template slot-scope="scope">
                    <el-input class="require_des" v-model="scope.row.number"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="单件重量(千克)">
                  <template slot-scope="scope">
                    <el-input type="textarea" class="remark" v-model="scope.row.unitWeight"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="长(米)">
                  <template slot-scope="scope">
                    <el-input type="textarea" class="remark" v-model="scope.row.length"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="宽">
                  <template slot-scope="scope">
                    <el-input type="textarea" class="remark" v-model="scope.row.wide"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="高">
                  <template slot-scope="scope">
                    <el-input type="textarea" class="remark" v-model="scope.row.high"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="单体体积">
                  <template slot-scope="scope">
                    <el-input type="textarea" class="remark" v-model="scope.row.monomerVolume"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="包装">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.packing" placeholder="箱">
                      <el-option
                        v-for="(item,index) in packings"
                        :key="index.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="运输条件">
                  <template slot-scope="scope">
                      <el-select v-model="scope.row.transportationConditions" placeholder="正常">
                        <el-option
                          v-for="(item,index) in transportationConditions"
                          :key="index"
                          :label="item"
                          :value="item">
                        </el-option>
                      </el-select>
                  </template>
                </el-table-column>
              </el-table>

              <div class="block" style="margin-top: 5px">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>

            </div>
          </div>
          <div style="margin-top: 10px">
            <span>总数量：{{sumInfo.totalQuantity}}</span>&nbsp;
            <span>总重量：{{sumInfo.totalWeight}}</span>&nbsp;
            <span>总体积：{{sumInfo.totalVolume}}</span>
            <el-button type="danger" @click="goodsOnSubmit" style="float: right">保存</el-button>
          </div>

        </el-tab-pane>
        <el-tab-pane label="费用信息">

          <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
            <el-form-item>
              <div>
                <span style="font-size: large">费用信息</span>
              </div>
            </el-form-item>
            <el-divider></el-divider>
          </el-form>

          <el-form :inline="true" :model="expenseinfos" class="demo-form-inline">
            <el-form-item label="运费单价(元/千克)">
              <el-input v-model="expenseinfos.weightUnitPrice"></el-input>
            </el-form-item>
            <el-form-item label="运费单价(元/立方米)">
              <el-input v-model="expenseinfos.volumeUnitPrice"></el-input>
            </el-form-item>
            <el-form-item label="运费合计">
              <el-input v-model="expenseinfos.totalFreight"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="expenseinfos" class="demo-form-inline">
            <el-form-item label="提货费">
              <el-input v-model="expenseinfos.deliveryFee"></el-input>
            </el-form-item>
            <el-form-item label="装卸费">
              <el-input v-model="expenseinfos.handlingCharges"></el-input>
            </el-form-item>
            <el-form-item label="包装费">
              <el-input v-model="expenseinfos.packingFee"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="expenseinfos" class="demo-form-inline">
            <el-form-item label="保险费">
              <el-input v-model="expenseinfos.insurancePremium"></el-input>
            </el-form-item>
            <el-form-item label="中转费">
              <el-input v-model="expenseinfos.transitFee"></el-input>
            </el-form-item>
            <el-form-item label="费用合计">
              <el-input v-model="expenseinfos.totalExpenses"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="expenseinfos" class="demo-form-inline">
            <el-form-item label="应收总计">
              <el-input v-model="expenseinfos.totalReceivable"></el-input>
            </el-form-item>
            <el-form-item label="预付款">
              <el-input v-model="expenseinfos.advanceCharge"></el-input>
            </el-form-item>
            <el-form-item label="代收金额">
              <el-input v-model="expenseinfos.collectionAmount"></el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="结算方式">
              <el-checkbox checked>到货现结</el-checkbox>
              <el-checkbox disabled>月结</el-checkbox>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="expenseinfos">
            <el-form-item label="银行账户信息">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="收款单位 ：    上海超人电器有限公司
开户行：          中国交通银行徐汇支行
账户：             98999989234839243243"
                v-model="expenseinfos.bankAccountInformation"
                style="width: 400px"
                disabled>
              </el-input>
            </el-form-item>
          </el-form>

          <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
            <el-form-item>
              <el-button type="danger" @click="expenseInfoOnSubmit">保存</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>
      </el-tabs>
  </div>

</template>

<script>
  import VDistpicker from 'v-distpicker'

export default {
  name: 'create',
  data() {
    return {
      orderId:'',
      basicInfo:{},
      //合同列表
      customerContracts:["合同1"],
      //订单来源列表
      ordersourceses:["手工录入","电脑导入"],
      //订单类型列表
      orderTypes:["运输订单","配送订单"],
      //运输方式列表
      transTypes:["火车","航运","海运","汽车"],
      //包装类型
      packings:[{
        value: '0',
        label: '箱'
      }, {
        value: '1',
        label: '个'
      },{
        value: '2',
        label: '条'
      }, ],
      transportationConditions:['正常','异常'],
      checked:false,
      //回单类型
      receiptTypes:['电子回单'],
      //地址信息
      addrinfos:{},
      fullAddress:'',
      area:'',

    //  货物信息
      tableData: [],
      selectlistRow: [],
      rowNum:1,
      sumInfo:{
        totalQuantity:0,
        totalWeight:0,
        totalVolume:0
      },
      currentPage:1,
      pageSize:2,
      pageSizes:[2,4,6],
      total:1,


    //  费用信息
      expenseinfos:{},

    }
  },
  components: { VDistpicker },
  computed:{},
  methods: {



    //省市区选择
    onSelected(data){
      const {province,city,area} = data;
      if(!province.code && !city.code && !city.code) return;
      this.fullAddress= data.province.value +"-" + data.city.value +"-" + data.area.value;
    },

    onSelected2(data){
      const {province,city,area} = data;
      if(!province.code && !city.code && !city.code) return;
      this.area= data.province.value +"-" + data.city.value +"-" + data.area.value;
    },

    //分页查询
    findGoodsByPage(){
      this.$http.get('http://localhost/goodsinfo/page',{
        params:{
          orderId:this.orderId,
          currentPage:this.currentPage,
          pageSize:this.pageSize
        }
      }).then(resp=>{
        if (resp.data.code == 100000){
          this.tableData = resp.data.data.list;
          this.total = resp.data.data.total;
        }
      })
    },

    handleSizeChange(val){
      this.pageSize = val;
      this.findGoodsByPage();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.findGoodsByPage();
    },

    //基本信息修改
    onSubmit() {
      //是否急单
      this.basicInfo.urgentOrder = this.checked ? 1 : 0;
      this.basicInfo.id = this.orderId;
      console.log("======{}",this.orderId)
      this.basicInfo.tRId =  this.basicInfo.tRId * 1;

      this.$http.post('http://localhost/orderbasicinfo/update',this.basicInfo)
        .then(resp=>{
          if (resp.data.code == 100000){
            this.$message({
              type: 'success',
              message: resp.data.msg,
            });
          }else {
            this.$message({
              type: 'error',
              message: resp.data.msg,
            });
          }
        })

    },

    //地址信息修改
    AddrOnSubmit(){

      this.addrinfos.shippingAddress = this.fullAddress;
      this.addrinfos.receivingAddress = this.area;

      this.$http.post('http://localhost/addrinfo/update',this.addrinfos)
        .then(resp=>{
          if (resp.data.code == 100000){
            this.$message({
              type: 'success',
              message: resp.data.msg,
            });
          }else {
            this.$message({
              type: 'error',
              message: resp.data.msg,
            });
          }
        })

    },

    //货物信息修改
    goodsOnSubmit(){

      console.log("订单号：",this.orderId);
      console.log(this.selectlistRow)

      let orderId = this.orderId

      this.$http.post('http://localhost/goodsinfo/update/' + orderId,this.selectlistRow)
        .then(resp=>{
          if (resp.data.code == 100000){
            //修改总货物信息
            this.$http.post('http://localhost/additionalGoodsinfo/update/'+ orderId,this.sumInfo)
              .then(resp=> {
                if (resp.data.code == 100000) {
                  this.$message({
                    type: 'success',
                    message: resp.data.msg,
                  });
                } else {
                  this.$message({
                    type: 'error',
                    message: resp.data.msg,
                  });
                }
              })
          }else {
            this.$message({
              type: 'error',
              message: resp.data.msg,
            });
          }
        })

    },

    //费用信息修改
    expenseInfoOnSubmit(){

      this.expenseinfos.orderId = this.orderId;

      this.$http.post('http://localhost/expenseinfo/update',this.expenseinfos)
        .then(resp=>{
          if (resp.data.code == 100000){
            this.$message({
              type: 'success',
              message: resp.data.msg,
            });
          }else {
            this.$message({
              type: 'error',
              message: resp.data.msg,
            });
          }
        })

    },

    // 获取表格选中时的数据
    selectRow (vals) {

      //拿到所有勾选的货物信息
      let resList = JSON.parse(JSON.stringify(vals));
      this.selectlistRow = resList;
      console.log(resList)
      console.log(this.selectlistRow)
      //初始化信息
      this.sumInfo.totalQuantity = 0;
      this.sumInfo.totalWeight = 0;
      this.sumInfo.totalVolume = 0;
      for (let i = 0; i < resList.length; i++) {

        this.sumInfo.totalQuantity += resList[i].number * 1;
        this.sumInfo.totalWeight += resList[i].unitWeight * resList[i].number;
        this.sumInfo.totalVolume += resList[i].monomerVolume * resList[i].number;

      }
    },
    // 增加行
    addRow () {
      var list = {
        rowNum:this.rowNum,
        post_id:[],
        require_des: '',
        remark:''
      };
      this.tableData.unshift(list)
      this.rowNum += 1;
    },
    // 删除方法
    // 删除选中行
    delData () {
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow
        // 获取选中行的索引的方法
        // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
        // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
        val.forEach((val, index) => {
          this.tableData.forEach((v, i) => {
            if (val.rowNum === v.rowNum) {
              // i 为选中的索引
              this.tableData.splice(i, 1)
            }
          })
        })
      }
      // 删除完数据之后清除勾选框
      this.$refs.table.clearSelection()
    },

    //查询基本信息
    findBasicInfo(id){

      this.$http.get('http://localhost/orderbasicinfo/find/' + id)
        .then(resp => {
          this.basicInfo = resp.data.data;
          console.log("=======================")
          console.log(this.basicInfo)
        })

    },

    findFee(id){

      this.$http.get('http://localhost/expenseinfo/find/' + id)
        .then(resp => {
          console.log("==============================================")
          this.expenseinfos = resp.data.data;
          console.log(this.expenseinfos)
        })

    },

    findAddress(id){

      this.$http.get('http://localhost/addrinfo/find/' + id)
        .then(resp => {
          this.addrinfos = resp.data.data;
          this.fullAddress = this.addrinfos.shippingAddress;
          this.area = this.addrinfos.receivingAddress;
        })

    },

  },
  created() {

    this.orderId = this.$route.query.id
    console.log(this.orderId)
    this.findBasicInfo(this.orderId)
    this.findFee(this.orderId)
    this.findAddress(this.orderId)
    this.findGoodsByPage();

  },

}
</script>

<style scoped>

</style>
